<template>
  <div style="margin-bottom: 20px">
    <div class="inputDiv">
      <el-input placeholder="请输入内容" v-model="input">
        <template slot="append"><span @click="search">全站搜索</span></template>
      </el-input>
    </div>
    <div class="bock">
      <el-row>
        <el-col :span="4" v-for="(item, index) in data" :key="index">
          <div
            :class="item.isActive ? 'bockDiv active' : 'bockDiv'"
            @click="clickDiv(index)"
          >
            {{ item.label + "(" + item.value + ")" }}
          </div>
        </el-col>
      </el-row>
      <div class="numDiv">
        <img src="../../assets/ts.png" alt="" />
        为您搜索到相关结果约<span>10000 </span>个
      </div>
    </div>
    <div class="bock2">
      <div v-for="(item, index) in list" :key="index"
      @click="clickBock"
      >
        <div class="title">
          <span class="s1">{{ item.type }}</span>
          <span class="s2" v-html="item.title"></span>
          <span class="s3">{{ item.time }}</span>
        </div>
        <div class="msg" v-html="item.msg"></div>
        <div class="file">
          <img src="../../assets/fj.png" alt="" />
          <span v-html="item.file"></span>
        </div>
      </div>
      <div style="border:none">
        <pagination
        :pagination="pagination"
        @current-change="pageChange"
        
      ></pagination>
      </div>
      
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      input: "吉林",
      data: [
        {
          label: "全部信息",
          value: "223",
          isActive: false,
        },
        {
          label: "网络安全政策法规",
          value: "49",
          isActive: false,
        },
        {
          label: "政策法规解读",
          value: "23",
          isActive: false,
        },
        {
          label: "网安工作动态",
          value: "23",
          isActive: false,
        },
        {
          label: "办事指南",
          value: "23",
          isActive: false,
        },
        {
          label: "操作指引",
          value: "23",
          isActive: false,
        },
        {
          label: "安全事件通报",
          value: "23",
          isActive: false,
        },
        {
          label: "预警通报",
          value: "23",
          isActive: false,
        },
        {
          label: "安全教育宣传",
          value: "23",
          isActive: false,
        },
        {
          label: "安全意识宣传",
          value: "56",
          isActive: false,
        },
      ],
      list: [
        {
          type: "政策法规",
          time: "2020-11-24 10:00:00",
          title: "《吉林省道路交通事故社会救助基金管理办法实施细则》",
          file: "吉林省道路办法细则.docx",
          msg: "公安部在本案基础上部署全国公安机关开展集群打击，共打掉犯罪团伙12个，抓获犯罪嫌疑人65名。吉林长春公安机关侦破王某明等人侵犯公民个人信息案。吉林长春公安机关网安部门查明，2024年1月以来，以王某明为首的犯罪团伙伪造工商营业执照，在招聘网站发布虚假招聘...",
        },
        {
          type: "政策法规",
          time: "2020-11-24 10:00:00",
          title: "《吉林省道路交通事故社会救助基金管理办法实施细则》",
          file: "吉林省道路办法细则.docx",
          msg: "公安部在本案基础上部署全国公安机关开展集群打击，共打掉犯罪团伙12个，抓获犯罪嫌疑人65名。吉林长春公安机关侦破王某明等人侵犯公民个人信息案。吉林长春公安机关网安部门查明，2024年1月以来，以王某明为首的犯罪团伙伪造工商营业执照，在招聘网站发布虚假招聘...",
        },
        {
          type: "政策法规",
          time: "2020-11-24 10:00:00",
          title: "《吉林省道路交通事故社会救助基金管理办法实施细则》",
          file: "吉林省道路办法细则.docx",
          msg: "公安部在本案基础上部署全国公安机关开展集群打击，共打掉犯罪团伙12个，抓获犯罪嫌疑人65名。吉林长春公安机关侦破王某明等人侵犯公民个人信息案。吉林长春公安机关网安部门查明，2024年1月以来，以王某明为首的犯罪团伙伪造工商营业执照，在招聘网站发布虚假招聘...",
        },
        {
          type: "政策法规",
          time: "2020-11-24 10:00:00",
          title: "《吉林省道路交通事故社会救助基金管理办法实施细则》",
          file: "吉林省道路办法细则.docx",
          msg: "公安部在本案基础上部署全国公安机关开展集群打击，共打掉犯罪团伙12个，抓获犯罪嫌疑人65名。吉林长春公安机关侦破王某明等人侵犯公民个人信息案。吉林长春公安机关网安部门查明，2024年1月以来，以王某明为首的犯罪团伙伪造工商营业执照，在招聘网站发布虚假招聘...",
        },
        {
          type: "政策法规",
          time: "2020-11-24 10:00:00",
          title: "《吉林省道路交通事故社会救助基金管理办法实施细则》",
          file: "吉林省道路办法细则.docx",
          msg: "公安部在本案基础上部署全国公安机关开展集群打击，共打掉犯罪团伙12个，抓获犯罪嫌疑人65名。吉林长春公安机关侦破王某明等人侵犯公民个人信息案。吉林长春公安机关网安部门查明，2024年1月以来，以王某明为首的犯罪团伙伪造工商营业执照，在招聘网站发布虚假招聘...",
        },
        {
          type: "政策法规",
          time: "2020-11-24 10:00:00",
          title: "《吉林省道路交通事故社会救助基金管理办法实施细则》",
          file: "吉林省道路办法细则.docx",
          msg: "公安部在本案基础上部署全国公安机关开展集群打击，共打掉犯罪团伙12个，抓获犯罪嫌疑人65名。吉林长春公安机关侦破王某明等人侵犯公民个人信息案。吉林长春公安机关网安部门查明，2024年1月以来，以王某明为首的犯罪团伙伪造工商营业执照，在招聘网站发布虚假招聘...",
        },
        {
          type: "政策法规",
          time: "2020-11-24 10:00:00",
          title: "《吉林省道路交通事故社会救助基金管理办法实施细则》",
          file: "吉林省道路办法细则.docx",
          msg: "公安部在本案基础上部署全国公安机关开展集群打击，共打掉犯罪团伙12个，抓获犯罪嫌疑人65名。吉林长春公安机关侦破王某明等人侵犯公民个人信息案。吉林长春公安机关网安部门查明，2024年1月以来，以王某明为首的犯罪团伙伪造工商营业执照，在招聘网站发布虚假招聘...",
        },
        {
          type: "政策法规",
          time: "2020-11-24 10:00:00",
          title: "《吉林省道路交通事故社会救助基金管理办法实施细则》",
          file: "吉林省道路办法细则.docx",
          msg: "公安部在本案基础上部署全国公安机关开展集群打击，共打掉犯罪团伙12个，抓获犯罪嫌疑人65名。吉林长春公安机关侦破王某明等人侵犯公民个人信息案。吉林长春公安机关网安部门查明，2024年1月以来，以王某明为首的犯罪团伙伪造工商营业执照，在招聘网站发布虚假招聘...",
        },
        {
          type: "政策法规",
          time: "2020-11-24 10:00:00",
          title: "《吉林省道路交通事故社会救助基金管理办法实施细则》",
          file: "吉林省道路办法细则.docx",
          msg: "公安部在本案基础上部署全国公安机关开展集群打击，共打掉犯罪团伙12个，抓获犯罪嫌疑人65名。吉林长春公安机关侦破王某明等人侵犯公民个人信息案。吉林长春公安机关网安部门查明，2024年1月以来，以王某明为首的犯罪团伙伪造工商营业执照，在招聘网站发布虚假招聘...",
        },
        {
          type: "政策法规",
          time: "2020-11-24 10:00:00",
          title: "《吉林省道路交通事故社会救助基金管理办法实施细则》",
          file: "吉林省道路办法细则.docx",
          msg: "公安部在本案基础上部署全国公安机关开展集群打击，共打掉犯罪团伙12个，抓获犯罪嫌疑人65名。吉林长春公安机关侦破王某明等人侵犯公民个人信息案。吉林长春公安机关网安部门查明，2024年1月以来，以王某明为首的犯罪团伙伪造工商营业执照，在招聘网站发布虚假招聘...",
        },
      ],
      pagination: {
        limit: 10,
        page: 1,
        total: 100,
      },
    };
  },

  computed: {},
  methods: {
    clickDiv(val) {
      this.data.forEach((item, index) => {
        if (val == index) {
          item.isActive = true;
        } else {
          item.isActive = false;
        }
      });
    },
    clickBock(){
      this.$router.push("/details")
    },
    pageChange(val) {
      console.log(val,"val")
      this.pagination.page = val;
      // this.onSubmit();
    },
    sizeChange(val) {
      this.pagination.page = 1;
      this.pagination.limit = val;
      // this.onSubmit();
    },
    setData() {
      this.list.forEach((item) => {
        let res = new RegExp("(" + this.input + ")", "g");
        item.title = item.title.replace(
          res,
          "<span style='color:red'>" + this.input + "</span>"
        );
        item.msg = item.msg.replace(
          res,
          "<span style='color:red'>" + this.input + "</span>"
        );
        item.file = item.file.replace(
          res,
          "<span style='color:red'>" + this.input + "</span>"
        );
      });
    },
    search() {
      this.setData();
    },
  },
};
</script>
<style scoped>
.bock {
  font-family: PingFangSC-Regular;
  font-size: 16px;
  color: #333333;
  font-weight: 400;
  padding: 20px;
  background: #ffffff;
  border: 1px solid rgba(203, 215, 234, 1);
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}
.bock2 {
  padding: 20px;
  margin-top: 20px;
  background: #ffffff;

  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
  border-radius: 3px 3px 0px 0px;
}
.bock2 > div {
  position: relative;
  cursor: pointer;
  border-bottom: 1px solid rgba(203, 215, 234, 1);
}
.bock2 span {
  display: inline-block;
}
.bock2 .s1 {
  padding: 2px 8px;
  border: 1px solid rgba(46, 107, 230, 1);
  border-radius: 3px;
  color: #2e6be6;
  font-size: 12px;
  background-color: #e6eeff;
}
.bock2 .s2 {
  font-size: 16px;
  color: #333333;
  line-height: 24px;
  font-weight: 600;
}
.bock2 .s3 {
  position: absolute;
  right: 20px;
  top: 28px;
  font-size: 16px;
  color: #666666;
  line-height: 22px;
  font-weight: 400;
}
.bock2 .msg {
  margin-top: 20px;
  font-size: 16px;
  color: #666666;
  line-height: 24px;
  font-weight: 400;
  width: 80%;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  /*要显示的行数*/
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}
.bock2 .file {
  margin: 20px 0;
}
.bock2 .title {
  margin: 20px 0;
}
.bock2 .file:hover {
  cursor: pointer;
  color: #0065ff;
}
.bock2 .file img {
  vertical-align: middle;
  margin-bottom: 2px;
}
.bockDiv {
  height: 32px;
  line-height: 32px;
  width: 90%;
  padding-left: 10px;
  cursor: pointer;
}
.bockDiv:hover {
  color: #0065ff;
}
.active {
  background: #e6eeff;
  border: 1px solid rgba(46, 107, 230, 1);
  border-radius: 3px;
  height: 30px;
}
.numDiv {
  margin-top: 20px;
  color: #666666;
}
.numDiv img {
  vertical-align: middle;
  margin-bottom: 4px;
}
.numDiv span {
  margin: 0 10px;
  color: #ff3333;
}
.inputDiv {
  padding-right: 16px;
  margin: 16px 0;
}
/deep/ .inputDiv .el-input {
  border: 8px solid rgba(0, 101, 255, 0.3);
  border-radius: 8px;
}
/deep/ .inputDiv .el-input__inner {
  height: 48px;
  line-height: 48px;
  font-size: 16px;
}
/deep/ .inputDiv .el-input-group__append {
  background-color: #0065ff;
  border: 1px solid #0065ff;
  color: #fff;
  font-size: 18px;
  font-weight: 00;
  font-family: PingFangSC-Medium;
}
</style>